<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
      <!-- 搜索框组件 -->
      <Search></Search>
      <!-- 轮播图组件 -->
      <Swiper></Swiper>
      <!-- 商品列表 组件 -->
      <List :shoplist="shoplist" :sortIndex="sortIndex" @deliverIndex="doodSrot"></List>
      <!-- 底部按钮 Tabbar -->
      <Tabbar></Tabbar>
  </div>
</template>

<script>
// 导入组件
import Search from './components/Search.vue'
import Swiper from './components/Swiper.vue'
import List from './components/List.vue'
import Tabbar from './components/Tabbar.vue'
// 导入axios
import axios from 'axios'
export default {
  data(){
    return { //定义数据
      sortIndex:0,
      shoplist:[], //存储后端传过来的数据
    }
  },
  mounted(){ //这个方法会在组件挂载完成时，自动执行，而且只执行一次
    //发送网络请求，请求店铺列表
    axios.get('/api/shop/list').then((res)=>{
      this.shoplist=res.data.list;//保存从服务器返回的店铺列表数据，这行代码修改了data中的响应式数据，会导致当前组件更新，组件会重新渲染
      // console.log(this.shoplist);
    })
  },
  methods:{ //定义方法
    //用正则过滤字符串
    zhuanshu(str){
      var reg=/^\d$/
      var str1='';
      for(var i=0;i<str.length;i++){
        if(reg.test(str.charAt(i))){
          str1+=str.charAt(i);
        }
      }
      return str1;
    },
    //点击排序
    doodSrot(index){
      this.sortIndex=index;
      if(index==0){
        this.shoplist.sort((a,b)=>{
          return parseInt(b.wmPoiScore)-parseInt(a.wmPoiScore);
        })
      }else if(index==1){
        this.shoplist.sort((a,b)=>{
          return parseInt(a.distance)-parseInt(b.distance);
        })
      }else if(index==2){
        this.shoplist.sort((a,b)=>{
           return parseInt(this.zhuanshu(b.monthSalesTip)) -parseInt(this.zhuanshu(a.monthSalesTip));
        })
      }
      console.log(this.shoplist[index].wmPoiScore);

      console.log(parseInt(this.shoplist[index].distance));
      console.log(this.zhuanshu("dingp123"));
    }
  },
  // 导入模块
  components:{
    Search,
    Swiper,
    List,
    Tabbar
  }
}
</script>

<style lang="scss" >
  *{
    margin: 0;
    padding: 0;
  }
  #app{
    margin-bottom: 70px;
  }
</style>
